---
title: Installation eines Vite- oder Rollup-Plugins
description: Erfahre, wie du YAML-Daten importieren kannst, indem du ein Rollup-Plugin zu deinem Projekt hinzufügst.
i18nReady: false
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro baut auf Vite auf und unterstützt sowohl Vite- als auch Rollup-Plugins. Dieses Rezept verwendet ein Rollup-Plugin, um eine YAML-Datei (`.yml`) in Astro importieren zu können.

## Rezept

1. Installiere `@rollup/plugin-yaml`:

   <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @rollup/plugin-yaml --save-dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @rollup/plugin-yaml --save-dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @rollup/plugin-yaml --save-dev
      ```
      </Fragment>
    </PackageManagerTabs>

2. Importiere das Plugin in deine `astro.config.mjs` und füge es dem Vite Plugins-Array hinzu:

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```


3. Schließlich kannst du YAML-Daten mit einer `Import`-Anweisung importieren:

    ```js
    import yml from './data.yml';
    ```

    :::note
    Du kannst jetzt zwar YAML-Daten in dein Astro-Projekt importieren, aber dein Editor stellt keine Typen für die importierten Daten bereit. Um Typen hinzuzufügen, erstelle oder suche eine vorhandene Datei `*.d.ts` im Verzeichnis `src` deines Projekts und füge Folgendes hinzu:
    ```ts title="src/files.d.ts"
    // Specify the file extension you want to import
    declare module "*.yml" {
      const value: any; // Add type definitions here if desired
      export default value;
    }
    ```
    Dies ermöglicht es deinem Editor, Typ-Hinweise für deine YAML-Daten bereitzustellen.
    :::
